<template>
  <div class="container">
    <el-form>
      <el-form-item label="关键字">
        <el-input
          v-model="keyword"
          class="keyword"
          placeholder="根据编号搜索"
        ></el-input>
        <el-button size="small" @click="clear">清除</el-button>
        <el-button type="primary" size="small" @click="search">搜索</el-button>
        <el-alert class="uesrs_main_statistics" :title="`共${total}条记录`" type="info" show-icon> </el-alert>
      </el-form-item>
      <el-table ref="table" :data="list" style="width: 100%">
        <el-table-column prop="id" label="编号" width="190"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="90">
          <template slot-scope={row}>
            <span style="margin-right: 10px">{{ row.questionType==='1'?'单选':row.questionType==='2'?'多选':row.questionType==='3'?'简答':'' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="210">
          <template slot-scope={row}>
            <div style="margin-right: 10px" v-for="item in row.questionIDs" :key="item.id">{{item.number}} </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="180">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="180">
        </el-table-column>
        <el-table-column prop="userName" label="录入人" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
             <el-button type="danger" icon="el-icon-delete" circle @click="del(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
     <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
  </div>
</template>

<script>
import moment from 'moment'
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      keyword: null,
      total: 0,
      query: {
        page: 1,
        pagesize: 10
      },
      list: []
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      const { data } = await randoms(this.query)
      this.total = data.counts
      this.list = [...data.items]
      this.list.forEach(item => {
        item.addTime = moment(item.addTime).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    clear () {
      this.keyword = ''
      this.initData()
    },
    async search () {
      const { data } = await randoms({ keyword: this.keyword })
      this.total = data.counts
      this.list = [...data.items]
      this.list.forEach(item => {
        item.addTime = moment(item.addTime).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    async del (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id })
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      await removeRandoms({ id })
      this.initData()
    },
    // 分页点击
    handleSizeChange (val) {
      this.query.pagesize = val
      this.query.page = 1
      this.initData()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.initData()
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;
  background-color: #fff;
}
.keyword {
  width: 240px;
  height: 30px;
  margin-right: 880px;
}
.uesrs_main_statistics {
  height: 30px;
  font-size: 13px;
  background-color: #f4f4f5;
  color: #909399;
  padding: 0 20px;
  margin-top: 20px;
}
</style>
